<template>
  <div class="right">
    <FunctionalCalendar v-model="calendarData" :configs="calendarConfigs"></FunctionalCalendar>
    <div class="test-clock-container">
      <flip-clock />
    </div>
  </div>
</template>

<script>
import FlipClock from 'kuan-vue-flip-clock'

export default {
  components: {
    FlipClock
  },
  data() {
    return {
      calendarData: {},
      calendarConfigs: {
        sundayStart: true,
        dateFormat: 'dd/mm/yyyy',
        isDatePicker: false,
        isDateRange: false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  position: sticky;
  top: 30px;
  width: 300px;
}

.test-clock-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  min-width: 480px;
  transform: scale(0.59) translateX(-34%) translateY(-50%);
  font:
    normal 12px 'Helvetica Neue',
    Helvetica,
    sans-serif;
  user-select: none;
  margin-top: 20px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: pink;
}
</style>
